<template>
  <div>
    <!-- 顶部区域 -->
    <div style="margin-bottom: 20px;">
      <span>学科：</span>
      <el-select v-model="subjectId" placeholder="请选择">
  <el-option label="全部" :value="null"></el-option>
  <el-option label="语文" :value="1"></el-option>
  <el-option label="数学" :value="2"></el-option>
  <el-option label="英语" :value="3"></el-option>
</el-select>
      <el-button type="primary" style="margin-left: 10px;" @click="search">查询</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="Id" width="50"></el-table-column>
      <el-table-column prop="paperName" label="试卷名称" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名称" width="180"></el-table-column>
      <el-table-column prop="userScore" label="得分" width="100"></el-table-column>
      <el-table-column label="题目对错" width="100">
        <template #default="{ row }">
          {{ `${row.questionCorrect}/${row.questionCount}` }}
        </template>
      </el-table-column>
      <el-table-column prop="doTime" label="耗时" width="100"></el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
    </el-table>

    <!-- 底部区域 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-model:current-page="pageIndex"
      v-model:page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { subjectPage } from '@/api/score'

// 表格数据类型定义
interface ScoreResponseType {
  id: number
  paperName: string
  userName: string
  userScore: string
  questionCorrect: number
  questionCount: number
  doTime: string
  createTime: string
}

// 分页数据
const tableData = ref<ScoreResponseType[]>([])
const total = ref<number>(0)
const pageIndex = ref<number>(1)
const pageSize = ref<number>(10)
const subjectId = ref<number | null>(null)

// 获取数据方法
const fetchData = async () => {
  const params: any = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  if (subjectId.value !== null) {
    params.subjectId = subjectId.value
  }

  try {
    const res = await subjectPage(params)
    if (res.code === 1) {
      tableData.value = res.response?.list ?? []
      total.value = res.response?.total ?? 0
    } else {
      console.error('接口错误:', res.message)
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    tableData.value = []
    total.value = 0
  }
}

// 查询按钮点击事件
const search = () => {
  pageIndex.value = 1
  fetchData()
}

// 分页大小变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  fetchData()
}

// 当前页码变化
const handleCurrentChange = (currentPage: number) => {
  pageIndex.value = currentPage
  fetchData()
}

// 初始化加载数据
onMounted(() => {
  fetchData()
})
</script>